<template>
  <el-select
    v-model="selectedValue"
    placeholder="请选择职业"
    clearable
    filterable
    style="width: 100%"
    @change="handleChange"
  >
    <el-option
      v-for="profession in professionList"
      :key="profession.id"
      :label="profession.professionName"
      :value="profession.id!"
    />
  </el-select>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { EvalProfessionVO, getSimpleProfessionList } from '@/api/eval/profession'

defineOptions({ name: 'ProfessionSelector' })

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: undefined
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const selectedValue = ref(props.modelValue)
const professionList = ref<EvalProfessionVO[]>([])

const handleChange = (value: any) => {
  emit('update:modelValue', value)
  emit('change', value)
}

const loadProfessionList = async () => {
  try {
    const data = await getSimpleProfessionList()
    professionList.value = data || []
  } catch (error) {
    console.error('加载职业列表失败:', error)
  }
}

onMounted(() => {
  loadProfessionList()
})
</script>
